<template>
  <div class="product">
    <div class="test">
      <div class="testNav">
        <div :class="{'selected':tab === 1,'testTitle':true}" @click="toTab(1)">邀请</div>
        <div :class="{'selected':tab === 2,'testTitle':true}" @click="toTab(2)">佣金</div>
      </div>
      <div class="container">
        <keep-alive>
          <Test1 v-if="tab === 1"></Test1>
          <Test2 v-else></Test2>
        </keep-alive>
      </div>
    </div>
  </div>
</template>
<script>
import Test1 from "./test1.vue";
import Test2 from "./test2.vue";
import vue from "vue";
import axios from "axios";
import { invite } from "../../axios/api.js";
import { NavBar, Tab, Tabs, Icon, Tag } from "vant";
export default {
  name: "product",
  components: {
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [Tag.name]: Tag,
    Test1,
    Test2
  },
  data() {
    return {
      tab: 1,
      active: 0,
      
    };
  },
  created() {
    
  },
  methods: {
    //返回上一页
    onClickLeft() {
      this.$router.push("/mine");
    },
    toTab(index) {
      this.tab = index;
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/less/variable.less";
/deep/.van-tab {
  color: @base_textColor;
}
/deep/ .van-tabs__line {
  background: none;
}
/deep/ .van-tab--active {
  color: #d1a568;
}
/deep/ .van-tabs__wrap {
  position: relative;
}
/deep/ .van-hairline--bottom::after {
  border-bottom-width: 0;
}
/deep/ .van-hairline--top-bottom::after {
  border-width: 0;
}
/deep/ .van-tabs--line {
  padding-top: 0;
}
.product {
  height: 100%;
  margin-bottom: 70px;
  overflow: hidden;
  position: relative;
  .header-bar {
    position: fixed;
    top: 0;
    z-index: 99;
    text-align: center;
    width: 100%;
    height: 40px;
    line-height: 46px;
    background-color: #fff;
    color: #323233;
    font-size: 16px;
    font-weight: 500;
  }
  .tabs {
    .tabs-item {
      i {
        margin-right: 2px;
      }
    }
  }
  .shuoming {
    position: absolute;
    right: 0;
    font-size: 14px;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: #666666;
    z-index: 999999;
    top: 13px;
  }
  //  <!-- 已得奖励（USDT） -->
  .award div {
    font-size: 19px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(209, 165, 104, 1);
    margin-top: 15px;
  }
  .profit {
    width: 100%;
    margin: 10px 0;
    .profit-title {
      padding: 10px 0;
      font-size: @base_textSize;
      color: @base_textColor;
    }
    .profit-list {
      // padding: 10px 0;
      .profit-item {
        width: 40%;
        .profit-icons {
          font-size: 14px;
          font-family: PingFang-SC-Regular;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
        }
        .profit-text {
          font-size: @base_textSize;
          color: @base_textColor;
        }
      }
    }
  }
  .xian {
    width: 100%;
    height: 10px;
    background: rgba(246, 246, 248, 1);
  }
  .test {
    width: 100%;
    .testNav {
      // height: 60px;
      // line-height: 60px;
      display: flex;
      border-bottom: 1px solid #e5e5e5;
      .testTitle {
        flex: 1;
        line-height: 40px;
        text-align: center;
      }
      .selected {
        width: 100px;
        line-height: 40px;
        color: #d1a568;
        // border: 1px solid red;
        margin: 0 auto;
      }
    }
  }
}
</style>

